<template>
    <div>

            <button @click="add">添加</button>
            <button @click="remove">删除</button>
        <div>
            <transition-group name="list" tag="p">
            <span v-for="(v,i) in arr" :key="i" class="list-item">{{v}}</span>
            </transition-group>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Animation6",
        data:()=>{
            return{
                arr:[1,2,3,4,],
                next:5,
            }

        },
        methods:{
            randomIndex:function(){
                console.log(Math.floor(Math.random()*this.arr.length))
              return Math.floor(Math.random()*this.arr.length)
            },
            add(){
                this.arr.splice(this.randomIndex(),0,this.next++)
            },
            remove:function () {
this.arr.splice(this.randomIndex(),1)
            }
        }
    }
</script>

<style scoped>
.list-item{
    display: inline-block;
    margin-right: 10px;
}
.list-enter-active, .list-leave-active {
    transition: all 1s;
}
.list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
</style>